<template>
  <div class="app-customer-management">
    <section class="app-main">
      <div class="tab-button">
        <div class="search-content" v-if="isAddOrder==true">
          <mt-field label="" placeholder="可输入客户名称查询" v-model="searchValue" @keyup.enter.native="handleSelectCode">
            <span class="iconfont icon-search" @click="handleSelectCode"></span></mt-field>
        </div>
        <ul class="tab-button-content" v-if="isAddOrder==false">
          <li v-for="(item,index) in customerType" class="item" :class="{active:currentType==index}" @click="handleChange(item,index)">{{item.name}}</li>
        </ul>
        <span class="action-add" @click="handleAdd">+</span>
      </div>
      <div class="module-list-none" v-if="carList.length<=0">
        暂无客商资料
      </div>
      <div class="tab-body">

        <!--<mt-cell :title="customerNatureTitle" :value="customerNature" is-link @click.native="handleSelectTest"></mt-cell>-->
        <mt-index-list>
          <mt-index-section v-for="(list,listIndex) in carList" :index="list.firstLetter">
            <mt-cell v-if="currentType==0" v-for="(item,index) in list.customerList" :title="item.name"  @click.native="handleSelectToOrder(item)">
              <span class="iconfont icon-bianji" @click.stop="handleEdit(item)"></span>
              <span class="iconfont icon-shanchu" @click.stop="handleRemove(item)"></span>
            </mt-cell>
            <mt-cell v-if="currentType==1" v-for="(item,index) in list.supplierList" :title="item.name">
              <span class="iconfont icon-bianji" @click="handleEdit(item)"></span>
              <span class="iconfont icon-shanchu" @click="handleRemove(item)"></span>
            </mt-cell>

          </mt-index-section>
        </mt-index-list>
      </div>
    </section>

    <mt-popup
      v-model="popupTestShow"
      position="bottom" class="popup-test-show">
      <mt-picker :slots="slotsTestAddress" class="picker" @change="onTestAddressChange" :visible-item-count="5" ></mt-picker >
      <div class="button-content">
        <mt-button type="danger" @click="handleSure">确认</mt-button>
      </div>
    </mt-popup>

    <mt-popup
      v-model="popupSelectCar"
      position="bottom" class="my-popup-car">
      <div class="popup-tips">请选择开单车辆<mt-button class="add-car" type="primary" @click="handleAddCar">新增车辆</mt-button></div>
      <div class="media-list">

        <mt-cell v-for="(item,index) in myCarList" :title="item.carNo" is-link @click.native="handleSelectCar(item)">
          <span>{{item.carOwner}}-{{item.phone}}</span>
        </mt-cell>
      </div>
    </mt-popup>

  </div>
</template>

<script>
  import { Header,Cell,Toast,MessageBox} from 'mint-ui';
//  Vue.component(Header.name, Header);
export default {
  components:{
    Header,
    Cell,
  },
  data () {
    return {
      searchValue:'',
      popupSelectCar:false,
      myCarList:[],
      isAddOrder:false,
      slotsTestAddress: [
        {
          flex: 1,
          values: ['一般企业s','保险客户'],
          className: 'slot1',
          textAlign: 'center'
        }
      ],
      customerNatureTitle:'客户性质',
      customerNature:'全部客户',
      customerType:[{
        name:'客户'
      },{
        name:'供应商'
      }],
      currentType:'0',
      carList: [],
      popupTestShow:false,
      testAddress:'',
      customerId:'',
    }
  },
  mounted(){
    if(sessionStorage.getItem('isAddOrder')!=undefined || sessionStorage.getItem('isAddOrder')!=null){
      this.isAddOrder=true;
      this.customerType=[{
        name:'选择客户'
      }];
    }
    this.getDataCustomer();
  },
  methods: {

    /** 获取车型列表 **/
    getDataCustomer() {
      var params = new URLSearchParams();
      params.append('page','1');
      params.append('rows','10');

      this.$axios({
        method: 'post',
        url:'gp/app/customerApp!getCustomerListApp.do',
        data:params
      }).then((res)=>{
        console.log(res,1111)
      this.carList=res.data.object;
    })
    },

    getDataSupplier() {
      var params = new URLSearchParams();
      params.append('page','1');
      params.append('rows','10');

      this.$axios({
        method: 'post',
        url:'gp/app/supplierApp!getSupplierListApp.do',
        data:params
      }).then((res)=>{
        console.log(res,1111)
      this.carList=res.data.object;
    })
    },
    handleRemove(item){
      MessageBox({
        title: '',
        message: '确认是否删除该客商?',
        showCancelButton: true
      }).then(action => {
        if(action=='confirm'){


        if(this.currentType==0){
          var params = new URLSearchParams();
          params.append('form.customerId',item.id);
          this.$axios({
            method: 'post',
            url:'gp/app/customerApp!deleteCustomer.do',
            data:params
          }).then((res)=>{
            if(res.data.result==true){
            Toast({
              message: res.data.message,
              position: 'middle',
              duration: 1500
            });
            this.getDataCustomer()
          }else{
            Toast({
              message: res.data.message,
              position: 'middle',
              duration: 1500
            });
          }
        })
        }else{
          var params = new URLSearchParams();
          params.append('form.supplierId',item.id);
          this.$axios({
            method: 'post',
            url:'gp/app/supplierApp!deleteSupplier.do',
            data:params
          }).then((res)=>{
            if(res.data.result==true){
            Toast({
              message: res.data.message,
              position: 'middle',
              duration: 1500
            });
            this.getDataSupplier()
          }else{
            Toast({
              message: res.data.message,
              position: 'middle',
              duration: 1500
            });
          }
        })
        }

      };
    })
    },
    handleEdit(item){
      if(this.currentType==0){
        this.$router.push({path:'/customer-add-edit',query:{id:item.id}})
      }else{
        this.$router.push({path:'/supplier-add-edit',query:{id:item.id}})
      }
    },
    handleChange(item,index){
      this.currentType=index;
      if(index==0){
        this.getDataCustomer()
      }else{
        this.getDataSupplier()
      }
    },
    handleSelectTest(){
      this.popupTestShow=true
    },
    onTestAddressChange(picker, values){
      this.testAddress=values[0]
    },
    handleSure(){
      this.customerNature=this.testAddress
      this.popupTestShow=false
    },
    handleAdd(){
      if(this.currentType==0){
        this.$router.push({path:'/customer-add-edit'})
      }else{
        this.$router.push({path:'/supplier-add-edit'})
      }
    },
    handleSelectToOrder(item){

      if(sessionStorage.getItem('isAddOrder')!=undefined || sessionStorage.getItem('isAddOrder')!=null){
        /**获取绑定的车辆**/
        var params = new URLSearchParams();
        params.append('form.customerId',item.id);
        this.$axios({
          method: 'post',
          url:'gp/bu/vehicle!getVehicleList.do',
          data:params
        }).then((res)=>{
          this.myCarList=res.data.rows;
        if(this.myCarList.length<=0){

          MessageBox({
            title: '',
            message: '该客户没有绑定车辆，不能开单，是否立即绑定车辆?',
            showCancelButton: true
          }).then(action => {
            if(action=='confirm'){

            this.$router.push({path:'/customer-add-edit',query:{id:item.id,isAddOrder:true}})
          }
        })
        }else{
          this.popupSelectCar=true;
          this.customerId=item.id
        }
      });
      }else{

        this.$router.push({path:'/customer-add-edit',query:{id:item.id}})
      }

    },
    handleSelectCar(item){
      this.$router.push({path:'/push-order-details2',query: {id:item.vehicleId,carOwner:item.carOwner,carNo:item.carNo,vin:item.vin,phone:item.phone}})

    },
    handleAddCar(){
      this.$router.push({path:'/customer-add-edit',query:{id:this.customerId,isAddOrder:true}})
    },
    handleSelectCode(){

    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style>

  .app-customer-management .tab-button{
    background: #f5f5f5;
    position: relative;
    padding:16px 0;
    text-align: center;
  }
  .app-customer-management .action-add{
    position: absolute;
    top:18px;

    right:12px;
    width:30px;
    height: 30px;
    color: #fff;
    font-size: 22px;
    border-radius: 50%;
    background:#007EE5;
    line-height: 32px;
  }
  .app-customer-management .tab-button-content{
    display: inline-block;
    border-radius: 20px;
    border: 1px solid #007EE5;
    overflow: hidden;
  }
  .app-customer-management .tab-button-content .item{
    display: inline-block;
    width: 80px;
    padding:4px 0;
    font-size:16px;
  }
  .app-customer-management .tab-button-content .item.active{
    background: #007EE5;
    color: #fff;
  }
  .app-customer-managemt .popup-test-show{
    width: 100%;

  }
  .app-customer-management .popup-test-show{
    width: 100%;

  }

  .app-customer-management .popup-test-show .button-content{
    padding:20px;
  }

  .app-customer-management .popup-test-show .mint-button{
    background: #007EE5;
    display: block;
    width: 100%;
  }
  .app-customer-management .popup-customer-add{
    background: #f5f5f5;
    width:100%;
    height: 100%;
    padding:12px 0;
    overflow: auto;
  }
  .app-customer-management .tab-body .iconfont{
    padding:0 4px;
  }
  .app-customer-management .tab-body .icon-bianji{
    color: #007EE5;
    font-size: 20px;

  }
  .app-customer-management .tab-body .icon-shanchu{
    font-size: 26px;

  }
  .app-customer-management .tab-body .mint-cell-title{
    padding: 0 6px 0 0;
    line-height: 20px;

  }
  .app-customer-management .module-list-none{
    position: fixed;
    top: 50px;
    left: 0;
    right: 0;
    padding:60px 0 0;
    font-size: 22px;
    color: #999;
    text-align: center;

  }
  .app-customer-management .my-popup-car{
    width: 100%;
    height: 50%;
    overflow: auto;
  }
  .app-customer-management .my-popup-car .add-car{
    position: absolute;
    top: 10px;
    right:16px;
    font-size: 13px;
    height: 32px;
  }
  .app-customer-management .my-popup-car .popup-tips{
    position: relative;
    background: #f5f5f5;
    padding:16px 12px 12px;
    font-size: 16px;
  }
  .app-customer-management .search-content{
    /*background: #fff;*/
    padding:0 60px 0 12px;
    overflow: auto;
    text-align: center;
    z-index: 1000;
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.02);
  }
  .app-customer-management .search-content .action-ruku{
    position: absolute;
    top: 13px;
    right: 12px;
    font-size: 13px;
    height: 34px;
  }
  .app-customer-management .search-content .mint-cell-wrapper{
    padding:2px 10px;
  }
  .app-customer-management .search-content .mint-cell{
    border: 1px solid #ddd;
    border-radius:20px;
    padding:0 6px;
    min-height: inherit;
  }
  .app-customer-management .search-content .mint-cell .mint-field-core{
    height: 30px;
    font-size: 14px;
  }
  .app-customer-management .search-content  .icon-search{
    padding-left: 12px;
    font-size: 20px;

  }
</style>
